<template>
  <div class="home-wrapper">
     <newNav/>
     <div class="rule-box">
        <div class="rule-title">{{$t('user.M_rules_title_1')}}</div>
        <div class="rule-text4">{{$t('user.M_rules_step1_msg1')}}</div>
        <div>{{$t('user.M_rules_step1_msg2')}}</div>
        <div class="rule-text5">{{$t('user.M_rules_step1_msg3')}}</div>
        <div>
          <div>
            <div>{{$t('user.M_rules_step1_no1')}}</div>
            <div>{{$t('user.M_rules_step1_no2')}}</div>
            <div>{{$t('user.M_rules_step1_no3')}}</div>
            <div>{{$t('user.M_rules_step1_no4')}}</div>
            <div>{{$t('user.M_rules_step1_no5')}}</div>
            <div>{{$t('user.M_rules_step1_no6')}}</div>
          </div>
          <div>
            <div>20%</div>
            <div>10%</div>
            <div>5%</div>
            <div>5%</div>
            <div>5%</div>
            <div>5%</div>
          </div>
        </div>
        <div class="rule-text1">{{$t('user.M_rules_step1_msg4')}}</div>
        <div class="rule-text2">
          <div>{{$t('user.M_rules_step1_text1')}}</div>
          <div>{{$t('user.M_rules_step1_text2')}}</div>
          <div>{{$t('user.M_rules_step1_text3')}}</div>
          <div>{{$t('user.M_rules_step1_text4')}}</div>
          <div>{{$t('user.M_rules_step1_text5')}}</div>
        </div>
        <div class="rule-text3">{{$t('user.M_rules_step1_text6')}}</div>
        <div class="rule-title">{{$t('user.M_rules_title_2')}}</div>
        <div class="rule-text4">{{$t('user.M_rules_step2_msg1')}}</div>
        <div class="rule-text1">{{$t('user.M_rules_step2_msg2')}}</div>
        <div class="rule-text2">
          <div>{{$t('user.M_rules_step2_msg3')}}</div>
          <div>{{$t('user.M_rules_step2_msg4')}}</div>
          <div>{{$t('user.M_rules_step2_msg5')}}</div>
          <div>{{$t('user.M_rules_step2_msg6')}}</div>
          <div>{{$t('user.buybackanddestro')}}</div>
        </div>
        <div class="rule-text5">{{$t('user.M_rules_step2_msg7')}}</div>
        <div class="rule-text1">{{$t('user.M_rules_step2_msg8')}}</div>
        <div class="rule-text2">
          <div>{{$t('user.M_rules_step2_text1')}}</div>
          <div>{{$t('user.M_rules_step2_text2')}}</div>
          <div>{{$t('user.M_rules_step2_text3')}}</div>
          <div>{{$t('user.M_rules_step2_text4')}}</div>
          <div>{{$t('user.M_rules_step2_text5')}}</div>
        </div>
        <div class="rule-title">{{$t('user.M_rules_title_3')}}</div>
        <div class="rule-text4">{{$t('user.M_rules_step3_msg1')}}</div>
        <div class="rule-text5">{{$t('user.M_rules_step3_msg2')}}</div>
        <div class="rule-pool">
          <div>
            <div>Pool1</div>
            <div>{{$t('user.M_rules_step3_text1')}}</div>
          </div>
          <div>
            <div>Pool2</div>
            <div>{{$t('user.M_rules_step3_text2')}}</div>
          </div>
          <div>
            <div>Pool3</div>
            <div>{{$t('user.M_home_coming_soon')}}</div>
          </div>
          <div>
            <div>Pool4</div>
            <div>{{$t('user.M_home_coming_soon')}}</div>
          </div>
        </div>
        <div class="rule-text1">{{$t('user.M_rules_step3_text5')}}</div>
        <div class="rule-time">
          <div>
            <div>{{$t('user.M_rules_step3_date1')}}</div>
            <div>{{$t('user.M_rules_step3_date2')}}</div>
            <div>{{$t('user.M_rules_step3_date3')}}</div>
          </div>
          <div>
            <div>2020/10/20</div>
            <div>2021/11/20</div>
            <div>400/{{$t('user.M_rules_step3_date4')}}</div>
          </div>
          <div>
            <div>2021/11/20</div>
            <div>2022/05/20</div>
            <div>200/{{$t('user.M_rules_step3_date4')}}</div>
          </div>
          <div>
            <div>2022/05/20</div>
            <div>2022/11/20</div>
            <div>100/{{$t('user.M_rules_step3_date4')}}</div>
          </div>
        </div>
        <div class="rule-title">{{$t('user.M_rules_title_4')}}</div>
        <div class="rule-text2">
          <div>{{$t('user.M_rules_step4_text1')}}</div>
          <div>{{$t('user.M_rules_step4_text2')}}</div>
          <div>{{$t('user.M_rules_step4_text3')}}</div>
          <div>{{$t('user.M_rules_step4_text4')}}</div>
          <div>{{$t('user.M_rules_step4_text5')}}</div>
        </div>
        <div class="rule-title">{{$t('user.M_rules_title_5')}}</div>
        <div class="rule-text5">{{$t('user.M_rules_step5_text1')}}</div>
     </div>
     <div class="bottom-bai">
      <homeBottom></homeBottom>
    </div>
     <div class="bottom-area">
      Copyright © 2020,Metapool
     </div>
  </div>
</template>

<script>
import newNav from '../components/newNav'
import homeBottom from '../components/public/homeBottom'
export default {
  name: 'home',
  data () {
    return {

    }
  },  
  components:{ newNav,homeBottom },
  mounted() {
   
  },
  methods: {
    handleBtnEvent(opts) {
      switch(opts.type){
        case 'route':
        this.$router.push(opts.path)
        break;
        case 'link':
        window.open(opts.link, '_blank');
        break;
        default:
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">

@media only screen and (min-width: 0px) and (max-width: 639px){
  .home-wrapper {
    background: #fff;
    color: #000;
    font-size: 16px;
    text-align: left;
    padding: 100px 20px 10px 20px;

    .bottom-bai{
      padding: 15px;
      padding-top: 60px;
    }

    >.bottom-area {
      margin-top: auto;
      padding: 60px 0;
      text-align: center;
    }
    
    .rule-box{
      width: 100%;
      border-radius: 20px;
      padding-top: 41px;
      font-size: 13px;
      color: rgba(0, 0, 0, .8);
      .rule-title{
        font-size: 20px;
        font-weight: bold;
        color: #000;
        margin-bottom: 15px;
      }
      >.rule-text4{
        margin-bottom: 10px;
      }
      >div:nth-child(3){
        margin-bottom: 12px;
      }
      >.rule-text5{
        margin-bottom: 20px;
      }
      >div:nth-child(5){
        border: 1px solid #E5E5E5;
        border-radius: 20px;
        width: 320px;
        margin-bottom: 40px;
        >div:nth-child(1){
          display: flex;
          >div{
            font-weight: bold;
            padding: 10px 12px;
            width: 53px;
            border-bottom: 1px solid #E5E5E5;
            border-right: 1px solid #E5E5E5;
          }
          >div:nth-child(6){
            border-right: none;
          }
        }
        >div:nth-child(2){
          display: flex;
          >div{
            padding: 10px 12px;
            width: 53px;
            border-right: 1px solid #E5E5E5;
          }
          >div:nth-child(6){
            border-right: none;
          }
        }
      }
      >.rule-text1{
        font-weight: bold;
        margin-bottom: 10px;
      }
      >.rule-text2{
        line-height: 24px;
        margin-bottom: 18px;
      }
      >.rule-text3{
        line-height: 24px;
        margin-bottom: 40px;
      }
      >.rule-pool{
        display: flex;
        flex-wrap: wrap;
        >div{
          width: 156px;
          padding: 18px 14px;
          border:1px solid #E5E5E5;
          border-radius: 20px;
          margin-right: 13px;
          margin-bottom: 15px;
          >div:nth-child(1){
            font-size: 16px;
            font-weight: bold;
          }
          >div:nth-child(2){
            font-size: 13px;
            color: rgba(0, 0, 0, .7);
            margin-top: 29px;
            line-height: 23px;
          }
        }
        >div:nth-child(2),>div:nth-child(4){
          margin-right: 0px;
        }
        >div:nth-child(3),>div:nth-child(4){
          margin-bottom: 25px;
        }
      }
      >.rule-time{
        width: 320px;
        border: 1px solid #E5E5E5;
        border-radius: 20px;
        margin-bottom: 59px;
        margin-top: 20px;
        >div{
          display: flex;
          >div{
            width: 156px;
            border-bottom: 1px solid #E5E5E5;
            border-right: 1px solid #E5E5E5;
            padding: 16px;
          }
          >div:nth-child(3){
            border-right: none;
          }
        }
        >div:nth-child(1){
          >div{
            font-weight: bold;
          }
        }
        >div:nth-child(4){
          >div{
            border-bottom: none;
          }
        }
      }
    } 
  }

 
}


@media only screen and (min-width: 640px) {
  .home-wrapper {
    background: #fff;
    color: #000;
    font-size: 16px;
    text-align: left;
    padding: 200px 16% 0;
    .bottom-bai{
      width: 1200px;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }

    >.bottom-area {
      margin-top: auto;
      padding: 60px 0;
      text-align: center;
    }
    .rule-box{
      width: 1200px;
      margin: 0 auto;
      border-radius: 20px;
      box-shadow: 3px 0px 30px rgba(97, 97, 97, 0.2);
      padding: 73px 101px;
      font-size: 16px;
      color: rgba(0, 0, 0, .8);
      .rule-title{
        font-size: 30px;
        font-weight: bold;
        color: #000;
        margin-bottom: 40px;
      }
      >.rule-text4{
        margin-bottom: 24px;
      }
      >div:nth-child(3){
        margin-bottom: 33px;
      }
      >.rule-text5{
        margin-bottom: 41px;
      }
      >div:nth-child(5){
        border: 1px solid #E5E5E5;
        border-radius: 20px;
        width: 938px;
        margin-bottom: 40px;
        >div:nth-child(1){
          display: flex;
          >div{
            font-weight: bold;
            padding: 16px;
            width: 156px;
            border-bottom: 1px solid #E5E5E5;
            border-right: 1px solid #E5E5E5;
          }
          >div:nth-child(6){
            border-right: none;
          }
        }
        >div:nth-child(2){
          display: flex;
          >div{
            padding: 16px;
            width: 156px;
            border-right: 1px solid #E5E5E5;
          }
          >div:nth-child(6){
            border-right: none;
          }
        }
      }
      >.rule-text1{
        font-weight: bold;
        margin-bottom: 24px;
      }
      >.rule-text2{
        line-height: 30px;
        margin-bottom: 53px;
      }
      >.rule-text3{
        line-height: 30px;
        margin-bottom: 72px;
      }
      >.rule-pool{
        display: flex;
        margin-bottom: 37px;
        >div{
          width: 216px;
          padding: 26px 32px;
          border:1px solid #E5E5E5;
          border-radius: 20px;
          margin-right: 25px;
          >div:nth-child(1){
            font-size: 20px;
            font-weight: bold;
          }
          >div:nth-child(2){
            font-size: 14px;
            color: rgba(0, 0, 0, .7);
            margin-top: 29px;
            line-height: 23px;
          }
        }
      }
      >.rule-time{
        width: 470px;
        border: 1px solid #E5E5E5;
        border-radius: 20px;
        margin-bottom: 89px;
        margin-top: 48px;
        >div{
          display: flex;
          >div{
            width: 156px;
            border-bottom: 1px solid #E5E5E5;
            border-right: 1px solid #E5E5E5;
            padding: 16px;
          }
          >div:nth-child(3){
            border-right: none;
          }
        }
        >div:nth-child(1){
          >div{
            font-weight: bold;
          }
        }
        >div:nth-child(4){
          >div{
            border-bottom: none;
          }
        }
      }
    }
  
  }

}

</style>
